<template>
  <div class="box-item">
    <t-row>
      <t-col :span="3">
        <div class="item-box">
          <titles :title="props.info.text" /> <textMax :data="props.info.remarks" :maxLen="80" />
        </div>
      </t-col>
      <t-col :span="3" v-for="(item, index) in props.info.children" :key="index">
        <div class="item-box" v-if="index % 2 !== 0" :class="{ 'item-box-br': index % 2 !== 0 }">
          <div class="item-heard">
            <img
              @click="pathChild(item)"
              :src="urls + item.value + '?imageView2/1/w/260/h/260/format/webp'"
              alt=""
              v-if="item.value"
            />

            <img
              @click="pathChild(item)"
              src="http://101.34.143.36:8890/api/image/387939155165253/h_260,w_260"
              alt=""
              v-else
            />
            <span
              class="item-text"
              :style="{
                fontSize: store.styleInfo.contentSize,
                fontFamily: store.styleInfo.textFamily,
                color: store.styleInfo.fontColor,
              }"
              >{{ item.remarks }}</span
            >
          </div>
          <span
            class="item-title"
            :style="{
              fontSize: store.styleInfo.mintitleSize,
              fontFamily: store.styleInfo.textFamily,
              color: store.styleInfo.fontColor,
              fontWeight: 'bold',
            }"
            >{{ item.text }}</span
          >
        </div>
        <div class="item-box" v-else>
          <span
            class="item-text1"
            :style="{
              fontSize: store.styleInfo.contentSize,
              fontFamily: store.styleInfo.textFamily,
              color: store.styleInfo.fontColor,
            }"
            >{{ item.remarks }}</span
          >
          <div class="item-heard">
            <span
              class="item-title1"
              :style="{
                fontSize: store.styleInfo.mintitleSize,
                fontFamily: store.styleInfo.textFamily,
                color: store.styleInfo.fontColor,
                fontWeight: 'bold',
              }"
              >{{ item.text }}</span
            >
            <img
              @click="pathChild(item)"
              :src="urls + item.value + '?imageView2/1/w/260/h/260/format/webp'"
              alt=""
              v-if="item.value"
            />

            <img
              @click="pathChild(item)"
              src="http://101.34.143.36:8890/api/image/387939155165253/h_260,w_260"
              alt=""
              v-else
            />
          </div>
        </div>
      </t-col>
    </t-row>
  </div>
</template>

<script setup lang="ts">
import { pathList, pathListLoop } from '../route';
import { urls } from '@/utils/request/upload';
import titles from '@/components/title/title.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import textMax from '@/components/textMax/textMax.vue';
import { handlemouse } from '@/utils/minxin';
import { onMounted } from 'vue';
import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
const router = useRouter();
const route = useRoute();
const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
});
const pathChild = (e: any) => {
  store.setchildModel(e);
  router.push({
    name: route.meta.loopType ? pathListLoop[8] : pathList[8],
    query: {},
  });
};
onMounted(() => {
  // handlemouse('scroll-box2');
});
</script>

<style lang="less" scoped>
@import './index.less';
.box-item {
  width: 100%;
  min-height: 576px;
}
.t-col {
  height: 576px;
}
.item-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 0 20px;
  width: 100%;
  height: 576px;
  img {
    width: 100%;
    height: auto;
  }
}
.item-box-br {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.item-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.item-text {
  font-weight: 500;
  margin-top: 32px;
  width: 100%;
  line-height: 28px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 5; //行数
  line-clamp: 5;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
}
.item-title {
}
.item-text1 {
  line-height: 28px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 5; //行数
  line-clamp: 5;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
}
.item-title1 {
  margin-bottom: 32px;
}
.item-heard {
  display: flex;
  flex-direction: column;
}
</style>
